<template>
  <view class="box">
    <!-- 经纪人管理 -->
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      经纪人管理
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="margin-left: 75rpx">经纪人管理</text>
      <!-- #endif -->
      <p class="p2" @click="guanLi">{{ text }}</p>
    </view>
    <view class="sous">
      <input type="text" class="input" v-model="searchKeyword" />
      <image
        class="souImage"
        src="https://pic.bangbangtongcheng.com/static/sousuo1.png"
        mode=""
      ></image>
      <view class="soutext" @click="Seach()">搜索</view>
    </view>
    <scroll-view
      scroll-y
      :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 88rpx - 74rpx)'"
    >
      <view>
        <view
          @click="details(item)"
          class="mingpian"
          v-for="(item, index) in jjrList"
          :key="item.id"
          :style="'margin-left: ' + (396 - width) + 'rpx;width: ' + (width + 324) + 'rpx'"
        >
          <checkbox
            v-if="width == 290"
            style="top: 70rpx; left: -80rpx; position: relative"
            :checked="item.active"
            :data-index="index"
            @click.stop="changeRadio"
          ></checkbox>
          <view class="name">{{ item.userInfo.nikeName || "未命名用户" }}</view>
          <image class="img1" v-if="item.userInfo.image" :src="item.userInfo.image" />
          <image
            class="img1"
            v-else
            src="https://pic.bangbangtongcheng.com/static/my/header.png"
            mode=""
          ></image>
          <view class="img2">经纪人</view>
          <view class="xin" v-if="item.score">
            <image
              class="img3"
              v-for="item1 in Number(item.score)"
              :key="item1 + 100"
              src="https://pic.bangbangtongcheng.com/static/xin_liang.png"
            />
            <image
              class="img3"
              v-for="item1 in 5 - item.score"
              :key="item1 + 10"
              src="https://pic.bangbangtongcheng.com/static/xin_hui.png"
            />
          </view>
          <view class="dai" v-if="item.auditStatus == 3">待审核</view>
          <view class="dai" v-if="item.auditStatus == 4">待平台审核</view>
          <view
            class="li"
            style="background-color: red !important; color: white"
            v-if="item.auditStatus == 2"
            >已拒绝</view
          >
          <view class="li" v-if="item.auditStatus == 1 && item.activeStatus == 1"
            >离职</view
          >
          <view
            class="dai"
            v-if="
              item.auditStatus == 1 &&
              item.activeStatus == 1 &&
              item.confirmResignation == 1
            "
            >离职待确认</view
          >
          <view class="zhi" v-if="item.auditStatus == 1 && item.activeStatus == 0"
            >在职</view
          >
        </view>
        <view v-if="jjrList.length == 0" class="none">
          <image
            src="https://pic.bangbangtongcheng.com/static/none.png"
            mode="widthFix"
          />
          <view>没有更多数据了</view>
        </view>
      </view>
    </scroll-view>
    <view class="bot" v-if="width == 290">
      <view class="bot_4" @click="delJJR">删除</view>
      <view
        class="bot_4"
        @click="mark"
        v-if="activeData.activeStatus == 0 && activeData.auditStatus == 1"
      >
        标记为离职
      </view>
      <view class="bot_4" @click="openPOPUP(true)" v-if="activeData.auditStatus == 3"
        >审核</view
      >
    </view>
    <view class="zbc" v-if="zbc" style="z-index: 11">
      <view class="shangjia" v-if="shangjia">
        <view class="li_1">确定要将当前人员标记为离职？</view>
        <view class="li_2" @click="guan">取消</view>
        <view class="li_3" @click="lizhi">确定</view>
      </view>
    </view>
    <view
      class="audit"
      style="
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(19, 18, 18, 0.5);
        z-index: 100;
        top: 0;
      "
      @click.self="isShowCCPOPUP = false"
      v-if="isShowCCPOPUP"
    >
      <view class="fabuZbc">
        <view class="popup_title">认证审核</view>
        <view class="content">{{ content }}</view>
        <view class="jjyy">拒绝原因:</view>
        <textarea
          type="text"
          :value="textContent"
          maxlength="50"
          @input="textInput"
          placeholder="拒绝时请输入拒绝原因"
        ></textarea>
        <view class="auditBut">
          <view class="but1" @click="submitFeedback(2)">拒绝</view>
          <view class="but" @click="submitFeedback(1)">通过</view>
        </view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = 106;
//  #endif
export default {
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  data() {
    return {
      // 显示确认和取消
      isShowCCPOPUP: false,
      isOperating: false,
      textContent: "",
      content: "",
      statusBarHeight,
      width: 366,
      text: "管理",
      TabCur: 0,
      zbc: false,
      shouye: false,
      shangjia: false,
      checked: false,
      scrollLeft: 0,
      userInfo: uni.getStorageSync("Pduser"),
      imgUrl: this.$imgSrc,
      picker: [],
      jjrList: [],
      activeData: {},
      searchKeyword: "",
    };
  },
  onLoad() {
    this.getjjrList();
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  methods: {
    Seach() {
      this.getjjrList();
    },
    textInput(e) {
      this.textContent = e.detail.value;
    },
    openPOPUP(flag) {
      let arr = this.jjrList.filter((el) => {
        return el.active;
      });
      if (!arr.length) {
        uni.showToast({
          title: "请选择经纪人",
          icon: "none",
          mask: true,
        });
        return;
      }
      this.isShowCCPOPUP = true;
    },
    async confuse() {
      this.isShowCCPOPUP = false;
    },
    submitFeedback(type) {
      var data = {
        reviewedBy: this.userInfo.id,
        businessType: this.userInfo.businessType,
        auditee: this.activeData.userInfo.id,
        storeId: this.activeData.storeId,
        systemMessagesId: "",
      };
      if (type == 2) {
        //拒绝
        if (!this.textContent) {
          uni.showToast({
            title: "请填写拒绝原因",
            icon: "none",
            mask: true,
          });
          return;
        }
        data.refuseReason = this.textContent;
        data.auditStatus = 2;
      }
      if (type == 1) {
        //同意
        delete data.refuseReason;
        data.auditStatus = 1;
      }
      this.$myRequest
        .post("/api/mobile/vehicleOwner/salesConsultantReview", data)
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: "success",
            });
            this.textContent = "";
            this.getjjrList();
          }
        });
      this.isShowCCPOPUP = false;
      // this.guanLi()
      this.text = "管理";
      this.width = 366;
    },

    details(item) {
      if (!this.showLogin()) {
        return;
      }
      if (item.activeStatus == 1) {
        uni.showToast({
          title: "该经纪人已离职，无法查看！",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (item.auditStatus == 2) {
        uni.showToast({
          title: "该经纪人已拒绝，无法查看！",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (item.auditStatus == 3) {
        this.activeData = item;
        this.isShowCCPOPUP = true;
        return;
      }
      uni.navigateTo({
        url:
          "/pages_owner/dealer/goldConsultant?id=" + item.id + "&userId=" + item.userId,
      });
    },
    guanLi() {
      if (this.text == "管理") {
        this.text = "完成";
        this.width = 290;
      } else {
        this.text = "管理";
        this.width = 366;
      }
    },
    guan() {
      this.zbc = false;
      this.shangjia = false;
    },
    allChecked() {
      this.checked = !this.checked;
      if (this.checked) {
        this.jjrList.forEach((el) => {
          el.active = true;
        });
      } else {
        this.jjrList.forEach((el) => {
          el.active = false;
        });
      }
    },
    mark() {
      let arr = this.jjrList.filter((el) => {
        return el.active;
      });
      if (!arr.length) {
        uni.showToast({
          title: "请选择经纪人",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (this.userInfo.id == arr[0].userId) {
        uni.showToast({
          title: "商家不能标记自己为离职",
          icon: "none",
          mask: true,
        });
        return;
      }
      this.zbc = true;
      this.shangjia = true;
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },

    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    changeRadio(e) {
      let that = this;
      let index = e.currentTarget.dataset.index;
      that.jjrList.forEach((el, index1) => {
        if (index == index1) {
          that.jjrList[index].active = !that.jjrList[index].active;
          that.activeData = that.jjrList[index];
        } else {
          el.active = false;
        }
      });
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async delJJR() {
      let arr = this.jjrList.filter((el) => {
        return el.active;
      });
      if (!arr.length) {
        uni.showToast({
          title: "请选择经纪人",
          icon: "none",
          mask: true,
        });
        return;
      }
      let ids = [];
      arr.forEach((el) => {
        ids.push(el.id);
      });
      await this.$myRequest
        .post("/api/mobile/vehicleOwner/deleteSalesConsultantBroker", {
          ids: String(ids),
          userId: this.userInfo.id,
        })
        .then((res) => {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        });
      await this.getjjrList();
    },
    lizhi() {
      let arr = [];
      this.jjrList.forEach((el) => {
        if (el.active) {
          arr.push(el);
        }
      });
      arr.forEach((v, j) => {
        this.$myRequest
          .post("/api/mobile/vehicleOwner/markResignation", {
            id: v.id,
            userId: this.userInfo.id,
            markedPerson: v.userId,
          })
          .then((res) => {
            if (j == arr.length - 1) {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
            this.guan();
          });
      });

      this.getjjrList();
    },
    detailjjr(id) {
      if (!this.showLogin()) {
        return;
      }
      uni.navigateTo({
        url: "/pages_owner/dealer/goldConsultant?userId=" + id,
      });
    },
    getjjrList() {
      let that = this;
      this.$myRequest
        .get("/api/mobile/vehicleOwner/getMySalesConsultantManagement", {
          pageSize: "999",
          pageNo: "1",
          userId: this.userInfo.id,
          storeId: this.userInfo.shopId,
          searchKeyword: this.searchKeyword,
        })
        .then((res) => {
          res.salesConsultantManagement.pageList.forEach((el) => {
            el.active = false;
          });
          this.jjrList = res.salesConsultantManagement.pageList;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.sous {
  height: 74rpx;
  margin: 40rpx 30rpx;
  position: relative;
  .input {
    width: 690rpx;
    height: 74rpx;
    border-radius: 37rpx;
    opacity: 1;
    border: 1px solid #64b6a8;
    padding-left: 70rpx;
    padding-right: 140rpx;
    color: #666666;
  }
  .souImage {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    top: 50%;
    left: 12rpx;
    transform: translateY(-50%);
  }
  .soutext {
    width: 120rpx;
    height: 60rpx;
    background-color: #64b6a8;
    border-radius: 30rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
    font-size: 26rpx;
    position: absolute;
    top: 50%;
    right: 12rpx;
    transform: translateY(-50%);
  }
}
.fabuZbc {
  position: fixed;
  top: 20%;
  left: 10%;
  width: 300px;
  height: 235px;
  background-color: #f3efef;

  .popup_title {
    line-height: 40px;
    text-align: center;
    height: 40px;
    background-color: #64b6a8;
    color: #fff;
    font-size: 16px;
  }

  .content {
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
    margin-top: 10px;
    font-size: 16px;
  }

  .jjyy {
    margin-top: 10px;
    font-size: 16px;
    margin-left: 10px;
  }

  textarea {
    margin-top: 10px;
    color: rgb(97, 94, 94);
    margin-left: 10px;
    height: 50px;
    margin-right: 10px;
    width: 92%;
  }

  .auditBut {
    display: flex;
    justify-content: center;

    .but {
      width: 200rpx;
      height: 80rpx;
      background: #64b6a8;
      border-radius: 50rpx;
      font-size: 34rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      margin-top: 24rpx;
      margin-left: 40rpx;
    }

    .but1 {
      width: 200rpx;
      height: 80rpx;
      background: #7c7c7c;
      border-radius: 50rpx;
      font-size: 34rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      margin-top: 24rpx;
    }
  }
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);

  .tan {
    position: absolute;
    width: 600rpx;
    height: 420rpx;
    background-color: #fff;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10rpx;
    overflow: hidden;

    .li_1 {
      margin-left: 32rpx;
      margin-top: 60rpx;
      font-weight: 600;
      font-size: 30rpx;
    }

    .li_2 {
      font-size: 30rpx;
      margin-left: 32rpx;
      margin-top: 30rpx;

      view {
        display: inline-block;
        font-weight: 600;
        font-size: 30rpx;
      }

      .xuan {
        position: relative;
        width: 160rpx;
        height: 60rpx;
        background: #ffffff;
        border: 2rpx solid #64b6a8;
        border-radius: 37rpx;
        line-height: 60rpx;
        color: #64b6a8;
        text-indent: 16rpx;
      }

      .xuan::before {
        position: absolute;
        top: 20rpx;
        right: 30rpx;
        content: "";
        border-color: #fff #fff #64b6a8 #fff;
        border-style: solid;
        border-width: 0rpx 8rpx 14rpx 8rpx;
        height: 0;
        width: 0;
      }
    }

    .li_3 {
      width: 536rpx;
      font-size: 24rpx;
      margin-left: 32rpx;
      color: #ea4b4b;
      margin-top: 40rpx;
    }

    .li_4 {
      position: absolute;
      font-size: 30rpx;
      width: 300rpx;
      height: 90rpx;
      background: #f2f2f2;
      bottom: 0;
      left: 0;
      text-align: center;
      line-height: 90rpx;
    }

    .li_5 {
      position: absolute;
      font-size: 30rpx;
      width: 300rpx;
      height: 90rpx;
      background: #64b6a8;
      bottom: 0;
      right: 0;
      text-align: center;
      line-height: 90rpx;
      color: #fff;
    }
  }

  .shangjia {
    position: absolute;
    width: 600rpx;
    height: 300rpx;
    background-color: #fff;
    border-radius: 10rpx;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);

    .li_1 {
      width: 100%;
      font-size: 34rpx;
      font-weight: 600;
      text-align: center;
      margin-top: 80rpx;
    }

    .li_2 {
      display: inline-block;
      vertical-align: top;
      width: 160rpx;
      height: 60rpx;
      background: #ffffff;
      border: 2rpx solid #64b6a8;
      border-radius: 37rpx;
      text-align: center;
      line-height: 60rpx;
      color: #64b6a8;
      margin-top: 58rpx;
      margin-left: 118rpx;
    }

    .li_3 {
      display: inline-block;
      vertical-align: top;
      width: 160rpx;
      height: 60rpx;
      background: #64b6a8;
      border-radius: 37rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
      margin-top: 58rpx;
      margin-left: 46rpx;
    }
  }
}

.box {
  width: 100%;
  height: 100vh;
  padding-bottom: 130rpx;
  background-color: #fff;
}

.tou {
  position: relative;
  width: 100%;
  text-align: center;
  /* #ifdef MP-WEIXIN */
  text-align: left;
  display: flex;
  align-items: center;
  /* #endif */
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    left: 30rpx;
  }

  .p2 {
    position: absolute;
    bottom: 0rpx !important;
    right: 30rpx;
    /* #ifdef MP-WEIXIN */
    position: initial;
    margin-left: auto;
    margin-right: 200rpx;
    bottom: 16rpx !important;
    /* #endif */
  }
}

.bot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background-color: #fff;
  z-index: 9;

  view {
    display: inline-block;
    position: absolute;
  }

  .bot_1 {
    left: 42rpx;
    top: 38rpx;
  }

  .bot_3 {
    width: 200rpx;
    height: 70rpx;
    background: #ffffff;
    border: 2rpx solid #64b6a8;
    color: #64b6a8;
    line-height: 68rpx;
    left: 304rpx;
    top: 25rpx;
    text-align: center;
    border-radius: 36rpx;
  }

  .bot_4 {
    width: 190rpx;
    height: 70rpx;
    background: #64b6a8;
    color: #ffffff;
    line-height: 68rpx;
    left: 520rpx;
    top: 25rpx;
    text-align: center;
    border-radius: 36rpx;
  }
}

.mingpian {
  position: relative;
  width: 690rpx;
  height: 200rpx;
  background: #ffffff;
  box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
  border-radius: 18rpx;
  margin-top: 40rpx;
  margin-left: 30rpx;

  .name {
    position: absolute;
    top: 50rpx;
    left: 174rpx;
    width: 300rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; //想要的行数
    -webkit-box-orient: vertical;
    font-size: 36rpx;
  }

  .img1 {
    position: absolute;
    top: 44rpx;
    left: 30rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }

  .img2 {
    position: absolute;
    top: 132rpx;
    left: 40rpx;
    width: 100rpx;
    height: 36rpx;
    background: url("https://pic.bangbangtongcheng.com/static/name.png");
    background-size: 100% 100%;
    font-size: 20rpx;
    color: #fff;
    text-align: center;
    line-height: 36rpx;
  }

  .zhiwei {
    position: absolute;
    top: 132rpx;
    left: 54rpx;
    font-size: 20rpx;
    color: #fff;
  }

  .xin {
    position: absolute;
    top: 112rpx;
    left: 170rpx;

    .img3 {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .img4 {
    position: absolute;
    width: 54rpx;
    height: 54rpx;
    top: 50rpx;
    left: 300rpx;
  }

  .img5 {
    position: absolute;
    width: 54rpx;
    height: 54rpx;
    top: 50rpx;
    left: 360rpx;
  }

  .li {
    position: absolute;
    top: 0;
    right: 0;
    width: 130rpx;
    height: 60rpx;
    background: #666666;
    border-radius: 0 18rpx 0 18rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
  }

  .dai {
    position: absolute;
    top: 0;
    right: 0;
    width: 160rpx;
    height: 60rpx;
    background: #cf9236;
    border-radius: 0 18rpx 0 18rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
  }

  .zhi {
    position: absolute;
    top: 0;
    right: 0;
    width: 130rpx;
    height: 60rpx;
    background: #64b6a8;
    border-radius: 0 18rpx 0 18rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
  }
}

/deep/uni-checkbox .uni-checkbox-input {
  background-color: rgba(0, 0, 0, 0);
  border: 2rpx solid #999;
}

/deep/uni-checkbox .wx-checkbox-input,
/deep/uni-checkbox .uni-checkbox-input {
  width: 48rpx;
  height: 48rpx;
}

/deep/.uni-checkbox-input-checked {
  background-color: #64b6a8 !important;
  border: 2rpx solid #64b6a8 !important;
}

/deep/ uni-checkbox::before {
  font-size: 40rpx;
  margin-top: -14rpx;
  right: 6rpx !important;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
</style>
